<template>
  <div style="display: inline-block; margin-left: 10px">
    <el-popover
      placement="top"
      trigger="click"
      width="200"
      :visible="batchPrintDialog"
    >
      <div style="text-align: inherit; font-size: 16px; margin-bottom: 10px">
        ①请选择标签规格
      </div>
      <el-select
        v-model="sizeName"
        placeholder="请选择"
        style="margin-bottom: 20px"
        :teleported="false"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div style="text-align: right; margin: 0">
        <el-button type="text" @click="batchPrintDialog = false"
          >取消</el-button
        >
        <el-button type="primary" :disabled="!sizeName" @click="PrintQRcode"
          >确定</el-button
        >
      </div>
      <template #reference>
        <el-button
          type="success"
          icon="Download"
          :disabled="!porps.selectList.length"
          @click="batchPrintDialog = true"
          >批量打印二维码</el-button
        >
      </template>
    </el-popover>
  </div>
</template>

<script setup name="BatchPrint">
import { batchPrint } from '@/plugins/batchOperation';
const porps = defineProps({
  selectList: {
    default: []
  }
});
const batchPrintDialog = ref(false);
const sizeName = ref('');
const tenantsName = '基地教务';

const options = [
  {
    label: '40×30',
    value: '设备码40_30'
  },
  {
    label: '40×60',
    value: '设备码40_60'
  },
  {
    label: '50×40',
    value: '设备码50_40'
  },
  {
    label: '70×90',
    value: '设备码70_90'
  },
  {
    label: '80×80',
    value: '设备码80_80'
  },
  {
    label: '100×100',
    value: '设备码100_100'
  }
];
function PrintQRcode() {
  let query = porps.selectList.map(item => {
    return {
      Company: encodeURIComponent(tenantsName),
      Code: encodeURIComponent(item.Code),
      Name: encodeURIComponent(item.Name)
    };
  });
  batchPrint(JSON.stringify(query), sizeName.value);
  batchPrintDialog.value = false;
}
</script>

<style lang="scss" scoped></style>
